

<title>layDate 日期组件功能演示</title>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>日期时间</cite></a>
    </div>
  </div>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">联动范围选择</div>
          <div class="layui-card-body" pad15>
            <div class="layui-form" wid100>
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">活动日期</label>
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test-laydate-start" placeholder="开始日期">
                  </div>
                  <div class="layui-form-mid">
                    -
                  </div>
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test-laydate-end" placeholder="结束日期">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">扩展农历组件</div>
          <div class="layui-card-body" pad15>
            <div class="layui-inline" id="ID-laydate-cell-render"></div>
            <style>
              .laydate-theme-lunar .layui-laydate-main {
                width: auto;
              }
              .laydate-theme-lunar .date-cell-inner {
                padding: 6px;
                width: 44px;
                height: 40px;
                border-radius: 4px !important;
              }
              .laydate-theme-lunar .layui-this {
                border-radius: 4px !important;
              }
              .laydate-theme-lunar .date-cell-inner b {
                display: block;
                font-weight: 400;
                height: 16px;
                font-size: 14px;
              }
              .laydate-theme-lunar .date-cell-inner i {
                display: block;
                font-style: normal;
                font-size: 10px;
              }
              .laydate-theme-lunar .badge {
                position: absolute;
                right: 0px;
                top: 0px;
                background-color: #4e5877;
                color: #fff;
                font-size: 12px;
                line-height: 14px;
                padding: 1px 2px;
                border-radius: 4px;
                text-decoration: none;
                transform: scale(0.7);
              }
              .laydate-theme-lunar .holiday .badge {
                background-color: #eb3333 !important;
              }
              .laydate-theme-lunar .hightlight i {
                color: #1e9fff;
              }
              .laydate-theme-lunar .layui-this .hightlight i {
                color: #fff;
              }
              .laydate-theme-lunar .laydate-month-list > li {
                height: 50px !important;
                line-height: 50px !important;
                width: 24.2% !important;
                margin: 18px 1px !important;
              }
              .laydate-theme-lunar .laydate-year-list > li {
                height: 40px !important;
                line-height: normal !important;
                width: 31.3% !important;
                margin: 8px 2px !important;
              }
              .laydate-theme-lunar .preview-inner>*{
                display: inline-block;
                margin-right: 5px;
                position:relative;
                font-size: 12px;
              }
              .laydate-theme-lunar .preview-inner>.badge{
                margin-right: 0;
              }
            </style>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
  layui.use(['admin', 'laydate', 'util'], function(){
    var laydate = layui.laydate;
    var $ = layui.$;
    var util = layui.util;

    /**
     * 联动范围选择
     */

    // 开始日期
    var insStart = laydate.render({
      elem: '#test-laydate-start'
      ,min: 0
      ,done: function(value, date){
        //更新结束日期的最小日期
        insEnd.config.min = lay.extend({}, date, {
          month: date.month - 1
        });

        //自动弹出结束日期的选择器
       insEnd.config.elem[0].focus();
      }
    });

    // 结束日期
    var insEnd = laydate.render({
      elem: '#test-laydate-end'
      ,min: 0
      ,done: function(value, date){
        //更新开始日期的最大日期
        insStart.config.max = lay.extend({}, date, {
          month: date.month - 1
        });
      }
    });

    /**
     * 扩展农历组件
     */
    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/lunar-javascript/1.6.12/lunar.min.js', function() {
      laydate.render({
        elem: '#ID-laydate-cell-render',
        position: 'static',
        // value: '2024-03-30',
        isPreview: false,
        btns: ['now'],
        theme: 'lunar',
        autoConfirm: false,
        ready: function (date) {
          if (!this._previewEl) {
            var key = this.elem.attr('lay-key');
            var panelEl = $('#layui-laydate' + key);
            this._previewEl = panelEl.find('.layui-laydate-preview');
            this.cellRender(date);
          }
        },
        change: function(value, date) {
          this.cellRender(date);
        },
        onNow: function(value, date) {
          this.cellRender(date);
        },
        cellRender: function (ymd, render, info) {
          var that = this;
          var y = ymd.year;
          var m = ymd.month;
          var d = ymd.date;
          var lunarDate = Solar.fromYmd(y, m, d).getLunar();
          var lunar = lunarDate.getDayInChinese();
          var jieQi = lunarDate.getJieQi();
          var holiday = HolidayUtil.getHoliday(y, m, d);
          var displayHoliday = holiday && holiday.getTarget() === holiday.getDay() ? holiday.getName() : undefined;
          var displayHolidayBadge = holiday && holiday.getTarget() ? (holiday.isWork() ? '班' : '休') : undefined;
          var isHoliday = holiday && holiday.getTarget() && !holiday.isWork();
          // 在预览区显示自定义农历相关信息
          if (that._previewEl && (!info || (info && info.type === "date"))) {
            var holidayBadgeStyle = [
              'color:#fff',
              'background-color:' + (isHoliday ? '#eb3333' : '#333'),
              'display:' + (displayHolidayBadge ? 'inline-block' : 'none')
            ].join(';')
            var festivalBadgeStyle = [
              'color:#fff',
              'background-color:#1e9fff',
              'display:' + (displayHoliday || jieQi ? 'inline-block' : 'none')
            ].join(';')
            var tipsText = [
              '<div class="preview-inner">',
                '<div style="color:#333;">农历' + lunarDate.getMonthInChinese() + '月' + lunarDate.getDayInChinese() + '</div>',
                '<div style="font-size:10px">' + lunarDate.getYearInGanZhi() + lunarDate.getYearShengXiao() + '年</div>',
                '<div style="font-size:10px">' + lunarDate.getMonthInGanZhi() + '月 ' + lunarDate.getDayInGanZhi() + '日</div>',
                '<div class="badge" style="' + holidayBadgeStyle  +'">' + displayHolidayBadge + '</div>',
                '<div class="badge" style="'+ festivalBadgeStyle +'">' + (displayHoliday || jieQi) + '</div>',
              '</div>'
            ].join('');
            that._previewEl.html(tipsText);
          };
          if (!render) return;
          // 面板类型
          if (info.type === 'date') {
            var clazz = [
              'date-cell-inner',
              isHoliday ? 'holiday' : '',
              displayHoliday || jieQi ? 'hightlight' : '',
            ].join(' ');
            var content = [
              '<div class="' + clazz + '">',
                '<b>' + d + '</b>',
                '<i>' + (displayHoliday || jieQi || lunar) + '</i>',
                displayHolidayBadge ? '<u class="badge">' + displayHolidayBadge + '</u>' : '',
              '</div>',
            ].join('');
            // render(content)
            // render($(content)[0])
            var contentEl = $(content);
            contentEl.on('contextmenu', function (e) {
              e.preventDefault();
              layer.tips(lunarDate.toString(), this, {
                tips: [1, '#16baaa'],
                zIndex: 999999999,
              });
            });
            render(contentEl);
          } else if (info.type === 'year') {
            var lunarDate = Lunar.fromDate(new Date(y + 1, 0));
            var lunar = lunarDate.getYearInGanZhi() + lunarDate.getYearShengXiao();
            render([
              y + '年',
              '<div style="font-size:12px">' + lunar + '年</div>',
            ].join(''));
          } else if (info.type === 'month') {
            var lunar = lunarDate.getMonthInChinese();
            render([m + '月(' + lunar + '月)'].join(''));
          }
        }
      });
    });

  });
  </script>
